import {Button, Layout, Avatar, theme, Dropdown} from "antd";

import React, {useState} from "react";
import {MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined} from "@ant-design/icons";
import styles from './index.less'
import {useSelector, useDispatch} from 'react-redux'
import {collapseMenu} from "../../store/reducers/tab";
import {useNavigate} from 'react-router-dom'

const avatarUrl = 'https://q3.itc.cn/q_70/images03/20240519/1b4e7565b46241b68288ae482412a866.jpeg'
const {Header} = Layout;
export default ({setCollapsed, collapsed}) => {
    const navigate = useNavigate()

    const dispatch = useDispatch()

    const redux_collapsed = useSelector(state => state.tab.isCollapse)

    const handelLoginOut = () => {
        localStorage.setItem('token', false)
        return navigate('/login')
    }

    const items = [
        {
            key: '1',
            label: (
                <div>
                    个人中心
                </div>
            ),
        },
        {
            key: '2',
            label: (
                <div onClick={handelLoginOut}>
                    退出
                </div>
            ),
        }
    ]

    const useChangeReduxData = () => {
        dispatch(collapseMenu())
    }

    return (
        <Header
            style={{
                padding: 0,
                background: '#fff',
            }}
        >
            <div className={styles['header']}>
                <Button
                    type="text"
                    icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                    onClick={() => {
                        setCollapsed(!collapsed)
                        useChangeReduxData()
                    }}
                    className={styles['menuOpIcon']}

                />

                <div>
                    <span>redux中的 isCollapse 值为：{redux_collapsed + ''}</span>
                    <Dropdown menu={{items}}>
                        <Avatar size={40} src={avatarUrl}/>
                    </Dropdown>
                </div>
            </div>


        </Header>
    )
}